<template>
  <div style="margin-top:30px">
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="仓库编码" style="margin-right:15px"   label-width="120px" prop="serialNumber">
              <el-input v-model="form.serialNumber" placeholder="请输入仓库编码" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="仓库名称" style="margin-right:15px"   label-width="120px" prop="name">
              <el-input v-model="form.name" placeholder="请输入仓库名称" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="仓库类型" style="margin-right:15px"   label-width="120px" prop="type">
              <el-select v-model="form.type" placeholder="请选择仓库类型" style="width:100%">
                <el-option
                  v-for="state in warehouseTypeOptions"
                  :key="state.key"
                  :value="state.key"
                  :label="state.display_name"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <el-form-item label="启用库位管理" style="margin-right:15px"   label-width="120px">

            <div class="grid-content bg-purple">
              <el-checkbox label="" v-model="form.locationManagement"></el-checkbox>
            </div>
          </el-form-item>

        </el-col>

      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="联系人" style="margin-right:15px"   label-width="120px">
              <el-input v-model="form.contacts" placeholder="请输入联系人" style="width:100%"  maxlength="100"  show-word-limit/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="联系电话" style="margin-right:15px"   label-width="120px">
              <el-input v-model="form.landlineNumber" placeholder="请输入联系电话" style="width:100%"  oninput = "value=value.replace(/[^\d]/g,'')" maxlength="11"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="手机号" style="margin-right:15px"   label-width="120px" prop="phoneNumber">
              <el-input v-model="form.phoneNumber" placeholder="请输入手机号" oninput = "value=value.replace(/[^\d]/g,'')" maxlength="11" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="传真" style="margin-right:15px" label-width="120px" prop="fax">
              <el-input v-model="form.fax" placeholder="请输入传真" maxlength="100" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="邮箱" style="margin-right:15px"   label-width="120px" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="100" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="X坐标"  style="margin-right:15px"  label-width="120px" prop="latitude">
              <el-input v-model="form.latitude" placeholder="请输入X坐标" maxlength="12" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="Y坐标" style="margin-right:15px"  label-width="120px" prop="longitude">
              <el-input v-model="form.longitude" placeholder="请输入Y坐标" maxlength="12" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>

      </el-row>



      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="所在区域" prop="areaList"  style="margin-right:15px"   label-width="120px">
              <el-cascader
                v-model="form.areaList"
                :options="areaOptions"
                style="width:100%"
                :props="{ value: 'countyCode', label: 'countyName', children: 'children' }"
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="详细地址" style="margin-right:15px"   label-width="120px">
              <el-input v-model="form.address" placeholder="请输入仓库详细地址" style="width:100%"  maxlength="500"  show-word-limit/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="备注" style="margin-right:15px"   label-width="120px">
              <el-input v-model="form.remarks" placeholder="请输入备注" style="width:100%"  maxlength="500"  show-word-limit/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcSubmit"  :disabled="isDisable" plain>确 定</el-button>
    </div>
  </div>
</template>
<script>
import {
  faxFormat,
  validEmail,
} from '@/utils/validate.js'
  import Vue from 'vue'
  import 'xe-utils'
  import VXETable from 'vxe-table'
  import 'vxe-table/lib/index.css'
  import {warehouseEdit, warehouseDetail} from '@/api/basicInfo'
  import { SelectArea } from "@/api/orderform";

  Vue.use(VXETable)
  export default {
    props:{
      operationCode: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        isDisable:false,   //确定键显示按钮

        areaOptions: [],
          warehouseTypeOptions : [
              {
                key:"1",display_name:"生产仓"
              },
              {
                  key:"2",display_name:"原料仓"
              },
              {
                  key:"3",display_name:"成品仓"
              },
              {
                  key:"4",display_name:"普通仓"
              }
          ],
        form: {
          areaList: [],
          address: '',        //地址
          city: '',           //市
          code: '',           //数据标识
          contacts: '',       //联系人
          country: '',        //国家
          county: '',         //县/区
          email: '',          //邮箱
          fax: '',            //传真
          groupCode: '',      //所属组织
          landlineNumber: '', //联系人号码
          latitude: '',       //维度
          longitude: '',      //经度
          name: '',           //仓库名称
          phoneNumber: '',    //手机号码
          locationManagement:'',

          province: '',       //省
          remarks: '',        //备注
          serialNumber: '',   //仓库代码
          status: '',         //状态
          type: '',           //仓库类型
        },
        rules: {
            landlineNumber: [
                {pattern: /^[0-9]*$/, message: '联系电话格式有误！', trigger: 'blur'}

            ],

          name: [
            {required: true, message: '请输入仓库名称', trigger: 'blur'},
          ],
          serialNumber: [
            {required: true, message: '请输入仓库编码', trigger: 'blur'},
          ],
          type: [
            {required: true, message: '请输入仓库类型', trigger: 'blur'},
          ],
          latitude: [
            // {required: true, message: '请输入维度', trigger: 'blur'},

            { pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/, message: '数量必须大于0' }
          ],
          longitude: [
            // {required: true, message: '请输入经度', trigger: 'blur'},

            { pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/, message: '数量必须大于0' }
          ],

            phoneNumber: [
                // {required: true, message: '请输入手机号', trigger: 'blur'},
                {pattern: /^1[34578]\d{9}$/, message: '手机号格式有误！', trigger: 'blur'}

            ],
            fax: [
              {
                required: false,
                validator(rule, value, callback) {
                  if (!rule.required && !value) return callback()
                  faxFormat(value) ? callback() : callback(new Error('传真格式有误！'))
                }
              }
            ],
            email: [
              {
                required: false,
                validator(rule, value, callback) {
                  if (!rule.required && !value) return callback()
                  validEmail(value) ? callback() : callback(new Error('邮箱格式有误！'))
                }
              }
            ]
        },
      }
    },
    created() {
       SelectArea().then(response => {
          this.areaOptions = response.data.records;
       });
       this.getInfo();
    },
    methods: {
      getInfo() {
          warehouseDetail(this.operationCode).then(response => {
            this.form = response.data
            for(let key in this.form ){
              if(this.form[key] === 0){
                this.form[key] = false
              }
              if(this.form[key] === 1){
                this.form[key] = true
              }
            }
          })
      },
      // 提交
      funcSubmit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            let arr = this.form
            for(let key in arr ){
              if(arr[key] === false){
                arr[key] = 0
              }
              if(arr[key] === true){
                arr[key] = 1
              }
            }
            const data = arr

            this.isDisable = true
            warehouseEdit(data).then(response => {
              this.$message({ message: response.msg, type: 'success' })
              this.$emit('fatherEditMethod')
              this.isDisable = false
            }).catch(() => this.isDisable = false)
          } else {
              return false
          }
        })

      },

      // 取消
      funcCancel() {
        this.$emit('fatherCancelMethod', 'edit')
      }

    }
  }
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 90px;
    float: right;
  }
</style>
